<template>
  <div id="Login">
    <customVideoBG :filterSize="10"/>
    <div class="loginMain">
      <div class="loginForm">
        <loginForm v-if="isLogin"/>
        <registerForm v-else/>
      </div>
    </div>
  </div>
</template>


<script setup>
import customVideoBG from "@/components/customVideoBG/customVideoBG";
import loginForm from "@/views/form/loginForm"
import registerForm from "@/views/form/registerForm";
import { useRoute } from 'vue-router';
import {ref, watch} from "vue";

const route = useRoute();

let isLogin = ref(true)

const loginOrRegister = (path)=>{
  if(path == '/login'){
    isLogin.value = true
  } else if(path == '/register'){
    isLogin.value = false
  }
}

loginOrRegister(route.path)

watch(route,(newVal,oldVal)=>{
  loginOrRegister(newVal.path)
})

</script>

<style scoped lang="scss">
#Login{
  position: relative;
  //height: 100vh;
  .loginMain{
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    .loginForm{

    }
  }
}
</style>
